<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <title>E.Life</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="icon/iconfont.css"/>
    <link rel="stylesheet" href="css/swiper-3.3.1.min.css"/>
    <style>
        .container{}
        .swiper-container{}
        .swiper-slide img{display: block;width: 100%;}

        .title{padding: 0.65rem 0.5rem;font-weight: bold;color: #929292;font-size: 12px;}
        .content1{padding: 0.75rem 0.5rem;background-color: #323238;}
        .content1-title{margin-bottom: 10px;font-weight: 600;font-size: 14px;color: #f1f1f1;}
        .content1-introduce{font-size: 13px;text-align: justify;}
        .address-box{position: relative;height: 1.3rem;line-height: 1.3rem;margin-top: 0.5rem;}
        .address-box .icon-zuobiao{float: left;color: #fbb701;font-size: 0.7rem;}
        .address-box .address{font-size: 0.65rem;line-height: 1.4rem;position: absolute;
            left: 1.2rem;right: 2rem;color: #929292;
            display: inline-block;text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden;}
        .address-box .icon-arrow{float: right;color: #fbb701;font-size: 0.7rem;}

        .project-list{}
        .project-item{background-color: #323238;padding: 0.5rem;position: relative;}
        .project-item:before{content: "";display: block;width: 0;height: 0;position: absolute;right: 40px;bottom: 0;visibility: hidden;
            border-left: 8px solid transparent;border-bottom: 10px solid #18171c;;border-right: 8px solid transparent;}
        .project-item .detail{float: left;overflow: hidden;}
        .project-item .detail img{display:block;width: 6rem;height: 4.25rem;float: left;}
        .project-item .detail .detail-inner{float: left;margin-left: 0.5rem;}
        .project-item .detail .detail-inner .name{margin-bottom: 1rem;margin-top: 0.75rem;font-weight: 600;color: #fff;}
        .project-item .detail .detail-inner .name span{color: #fbb701;font-weight: normal;}
        .project-item .detail .detail-inner .personal-guide{font-size: 0.6rem;line-height: 1.2rem;}
        .project-item .detail .detail-inner .personal-guide input{width: 1.2rem;height: 1.2rem;border: 1px solid #666;margin-left: 0.25rem;
                border-radius: 0.25rem;-webkit-appearance: none;vertical-align: bottom;position: relative;}
        .project-item .detail .detail-inner .personal-guide input:after{font-family: "iconfont";content: "\e611";display: inline-block;
            font-size: 0.8rem;position: absolute;left: 0.15rem;top: 0;font-weight: bold;line-height: 1rem;color: transparent;
        }
        .project-item .detail .detail-inner .personal-guide input:checked{background-color: #fbb701;border: 1px solid #fbb701;}
        .project-item .btn{float: right;}
        .project-item .detail .detail-inner .personal-guide input:checked:after{
            color: #fff;
        }
        .project-item .btn{margin-top: 1.3rem;}
        .project-item .btn button{background-color: #43434a;-webkit-appearance: none;color: #fff;font-size: 0.6rem;
            padding: 0.4rem 0.7rem;border-radius: 0.2rem;border: 1px solid #494949;}
        .project-item .btn .re-active{background-color: #fbb701;border: 1px solid #fbb701;}
        .package-detail{display: none;}
        .package-detail table{width: 100%;max-width: 100%;position: relative;background-color: #18171c;}
        .package-detail td{padding: 0.25rem;}
        .package-detail td.on{background-color: #fbb701;}
        .package-detail a{color: #f1f1f1;font-size: 12px;text-align: center;}
        .package-detail a .today{vertical-align: middle;display: block;}
        .package-detail a .date{display: block;}
        .package-detail a .day-of-week{display: block;margin-top: 0.25rem;}

        .package-detail .arrival-time{background-color: #1c1c20;overflow: hidden;color: #f1f1f1;line-height: 1.4rem;padding: 0.35rem 0.75rem 0.25rem;}
        .package-detail .arrival-time .arrival-title{float: left;font-size: 0.6rem;}
        .package-detail .arrival-time .choose-time{float: left;margin-left: 0.85rem;line-height: 1.4rem;overflow: hidden;}
        .package-detail .arrival-time .choose-time span{float: left;}
        .package-detail .arrival-time .choose-time i{font-size: 0.6rem;color: #fbb701;float: left;margin-left: 0.5rem;}
        .package-detail .train-time{background-color: #1c1c20;overflow: hidden;color: #f1f1f1;padding: 0.25rem 0.75rem 0.35rem;line-height: 1.4rem;}
        .package-detail .train-time .train-title{float: left;font-size: 0.6rem;}
        .package-detail .train-time .choose-time{float: left;margin-left: 0.85rem;overflow: hidden;}
        .package-detail .train-time .choose-time .left-btn{float: left;width: 1.4rem;height: 1.4rem;border: 1px solid gray;border-radius: 15%;text-align: center;}
        .package-detail .train-time .choose-time .left-btn:active{background-color: #fbb701;border: 1px solid #fbb701;}
        .package-detail .train-time .choose-time .middle-time{float: left;margin: 0 0.3rem;color: #fff;}
        .package-detail .train-time .choose-time .right-btn{float: left;width: 1.4rem;height: 1.4rem;border: 1px solid gray;border-radius: 15%;text-align: center;}
        .package-detail .train-time .choose-time .right-btn:active{background-color: #fbb701;border: 1px solid #fbb701;}

        .class-card{padding:0.25rem 0.5rem;background-color: #323238;}
        .class-card li{overflow: hidden;padding: 0.25rem 0;}
        .class-card li .img-box{float: left;position: relative;}
        .class-card li .img-box .bg-img{display: block;width: 6rem;height: 4.25rem;}
        .class-card li .img-box .card-title{position: absolute;left: 0;bottom: 0;width: 100%;line-height: 1.4rem;color: #fff;padding-left: 0.5rem;}
        .class-card li .img-box .tips-img{position: absolute;right: 0;bottom: 0.5rem;width: 2.2rem;height: 2rem;}
        .class-card li .middle-word{float: left;margin-left: 0.5rem;}
        .class-card li .middle-word h1{font-size: 0.8rem;color: #fff;font-weight: normal;margin-top: 0.5rem;}
        .class-card li .middle-word h2{font-size: 0.6rem;color: #999;font-weight: normal;margin-top: 0.3rem;}
        .class-card li .middle-word h3{font-size: 0.8rem;color: #fbb701;font-weight: normal;margin-top: 0.3rem;}
        .class-card li .btn{float: right;display: table;height: 4.25rem;}
        .class-card li .btn div{display: table-cell;vertical-align: middle;}
        .class-card li .btn div button{font-size: 0.6rem;-webkit-appearance: none;background-color: #fbb701;border: none;
            color: #fff;padding: 0.4rem 1.2rem;border-radius: 0.2rem;}

        .evaluate-list{}
        .evaluate-list li{background-color: #323238;position: relative;padding: 0.5rem;display: -webkit-box;margin-bottom: 0.5rem;}
        .evaluate-list li .face-img{width: 2.2rem;height: 2.2rem;}
        .evaluate-list li .face-img img{display: block;width: 100%;height: 100%;}
        .evaluate-list li .evaluate-item{-webkit-box-flex: 1;margin-left: 0.5rem;}
        .evaluate-list li .evaluate-item .evaluate-title{overflow: hidden;line-height: 1.5rem;}
        .evaluate-list li .evaluate-item .evaluate-title .name{float: left;font-size: 0.65rem;color: #fff;}
        .evaluate-list li .evaluate-item .evaluate-title .time{float: right;font-size: 0.6rem;}
        .evaluate-list li .evaluate-item .evaluate-detail{font-size: 0.7rem;color: #ccc;text-align: justify;line-height: 1rem;}

        .footer{height: 2.5rem;}
        .footer-fixed{position: fixed;left: 0;bottom: 0;width: 100%;height: 2.5rem;background-color: #18171c;}
        .footer-fixed .right-btn{display: block;position: absolute;top: 0;right: 0;z-index: 2;line-height: 2.5rem;background-color: #fbb701;;color: #fff;font-size: 0.7rem;padding: 0 1rem;}
        .footer-fixed .total-price{position: absolute;;top: 0;left: 0;width: 100%;height: 100%;text-align: center;line-height: 2.5rem;}
        .footer-fixed .total-price span{font-size: 1rem;color: #fbb701;}
    </style>
</head>
<body>
    <div class="container">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/index_detail_img01.png" alt=""/></div>
                <div class="swiper-slide"><img src="img/index_detail_img01.png" alt=""/></div>
                <div class="swiper-slide"><img src="img/index_detail_img01.png" alt=""/></div>
            </div>
        </div>

        <p class="title">场地介绍</p>
        <div class="content1">
            <p class="content1-title">Work + 私教馆</p>
            <p class="content1-introduce">
                这里是一个大概的介绍这里是一个大概的介绍这里是一个大概的介绍
                这里是一个大概的介绍这里是一个大概的介绍这里是一个大概的介绍
                这里是一个大概的介绍这里是一个大概的介绍这里是一个大概的介绍
            </p>
            <div class="address-box">
                <i class="iconfont icon-zuobiao"></i>
                <span class="address">成都市武侯区都城雅颂（南区）荣华路29号</span>
                <i class="iconfont icon-arrow"></i>
            </div>
        </div>
        <p class="title">项目预约</p>
        <div class="project-list">
            <ul>
                <li>
                    <div class="project-item clear">
                        <div class="btn">
                            <button class="re-active" type="button">选择时间</button>
                        </div>
                        <div class="detail">
                            <img src="img/index_detail_img02.png" alt=""/>
                            <div class="detail-inner">
                                <p class="name">游泳<span> 50/次</span></p>
                                <p class="personal-guide"><span>请私人指导</span><input type="checkbox"/></p>
                            </div>
                        </div>
                    </div>
                    <div class="package-detail">
                        <table>
                            <tbody>
                                <tr>
                                    <td class="on">
                                        <a href="">
                                            <span class="today">今日</span>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="">
                                            <span class="date">03.08</span>
                                            <span class="day-of-week">周二</span>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="">
                                            <span class="date">03.09</span>
                                            <span class="day-of-week">周三</span>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="">
                                            <span class="date">03.10</span>
                                            <span class="day-of-week">周四</span>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="">
                                            <span class="date">03.11</span>
                                            <span class="day-of-week">周五</span>
                                        </a>
                                    </td>
                                    <td>
                                        <a href="">
                                            <span class="date">03.12</span>
                                            <span class="day-of-week">周六</span>
                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="arrival-time">
                            <p class="arrival-title">到达时间</p>
                            <div class="choose-time">
                                <span>13:00</span>
                                <i class="iconfont icon-arrowdown"></i>
                            </div>
                        </div>
                        <div class="train-time">
                            <p class="train-title">训练时间</p>
                            <div class="choose-time">
                                <div class="left-btn">-</div>
                                <p class="middle-time">1小时</p>
                                <div class="right-btn">+</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="project-item clear">
                        <div class="btn">
                            <button class="re-active" type="button">选择时间</button>
                        </div>
                        <div class="detail">
                            <img src="img/index_detail_img02.png" alt=""/>
                            <div class="detail-inner">
                                <p class="name">游泳<span> 50/次</span></p>
                                <p class="personal-guide"><span>请私人指导</span><input type="checkbox"/></p>
                            </div>
                        </div>
                    </div>
                    <div class="package-detail">
                        <table>
                            <tbody>
                            <tr>
                                <td class="on">
                                    <a href="">
                                        <span class="today">今日</span>
                                    </a>
                                </td>
                                <td>
                                    <a href="">
                                        <span class="date">03.08</span>
                                        <span class="day-of-week">周二</span>
                                    </a>
                                </td>
                                <td>
                                    <a href="">
                                        <span class="date">03.09</span>
                                        <span class="day-of-week">周三</span>
                                    </a>
                                </td>
                                <td>
                                    <a href="">
                                        <span class="date">03.10</span>
                                        <span class="day-of-week">周四</span>
                                    </a>
                                </td>
                                <td>
                                    <a href="">
                                        <span class="date">03.11</span>
                                        <span class="day-of-week">周五</span>
                                    </a>
                                </td>
                                <td>
                                    <a href="">
                                        <span class="date">03.12</span>
                                        <span class="day-of-week">周六</span>
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="arrival-time">
                            <p class="arrival-title">到达时间</p>
                            <div class="choose-time">
                                <span>13:00</span>
                                <i class="iconfont icon-arrowdown"></i>
                            </div>
                        </div>
                        <div class="train-time">
                            <p class="train-title">训练时间</p>
                            <div class="choose-time">
                                <div class="left-btn">-</div>
                                <p class="middle-time">1小时</p>
                                <div class="right-btn">+</div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <p class="title">课时卡</p>
        <div class="class-card">
            <ul>
                <li>
                    <div class="img-box">
                        <img class="bg-img" src="img/index_detail_img03.png" alt=""/>
                        <p class="card-title">会员卡</p>
                        <img class="tips-img" src="img/index_detail_img05.png" alt=""/>
                    </div>
                    <div class="middle-word">
                        <h1>work+私教馆年卡</h1>
                        <h2>有效期：一年</h2>
                        <h3>￥2000</h3>
                    </div>
                    <div class="btn">
                        <div>
                            <button>购买</button>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="img-box">
                        <img class="bg-img" src="img/index_detail_img03.png" alt=""/>
                        <p class="card-title">会员卡</p>
                        <img class="tips-img" src="img/index_detail_img05.png" alt=""/>
                    </div>
                    <div class="middle-word">
                        <h1>work+私教馆年卡</h1>
                        <h2>有效期：一年</h2>
                        <h3>￥2000</h3>
                    </div>
                    <div class="btn">
                        <div>
                            <button>购买</button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <p class="title">评价详情</p>
        <ul class="evaluate-list">
            <li>
                <div class="face-img">
                    <img src="img/index_detail_img04.png" alt=""/>
                </div>
                <div class="evaluate-item">
                    <p class="evaluate-title">
                        <span class="name">Lazar</span>
                        <span class="time">3月25日 13:17</span>
                    </p>
                    <p class="evaluate-detail">你还在使用传统的哑铃、杠铃训练吗？你还在使用跑步机减肥吗？你还在因为锻炼枯燥而无法坚持吗？快来使用功能性训练来减脂锻炼吧！本课程使用绳梯、跨栏架、BOSU球、药球等功能训练器械进行训练，使你得训练更有趣、更有效让你爱上锻炼。</p>
                </div>
            </li>
            <li>
                <div class="face-img">
                    <img src="img/index_detail_img04.png" alt=""/>
                </div>
                <div class="evaluate-item">
                    <p class="evaluate-title">
                        <span class="name">Lazar</span>
                        <span class="time">3月25日 13:17</span>
                    </p>
                    <p class="evaluate-detail">你还在使用传统的哑铃、杠铃训练吗？你还在使用跑步机减肥吗？你还在因为锻炼枯燥而无法坚持吗？快来使用功能性训练来减脂锻炼吧！本课程使用绳梯、跨栏架、BOSU球、药球等功能训练器械进行训练，使你得训练更有趣、更有效让你爱上锻炼。</p>
                </div>
            </li>
        </ul>
    </div>
<footer class="footer">
    <div class="footer-fixed">
        <a href="reserve_detail.html" class="right-btn">确定预约</a>
        <p class="total-price">合计:<span>￥50.00</span></p>
    </div>
</footer>
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/swiper-3.3.1.jquery.min.js"></script>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        loop: true
        //...
    });
    $(function(){
        $('.project-item .btn button').on('click',function(){
            $('.project-item .btn button').addClass('re-active');
            $(this).removeClass('re-active');
            $('.re-active').parent().parent().parent().find('.package-detail').slideUp();
            $(this).parent().parent().parent().find('.package-detail').slideDown();
        })
    })
</script>
</html>